<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>搜索页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">     
    <meta content="yes" name="apple-mobile-web-app-capable">     
    <meta content="black" name="apple-mobile-web-app-status-bar-style">     
    <meta content="telephone=no" name="format-detection">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="/H5/css/sm.min.css">
    <link rel="stylesheet" href="/H5/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/H5/css/main.css?v=2" />
</head>
<body>
    <div class="page-group ms-controller" :controller="search">
        <div class="page page-current">
            <header class="bar bar-nav">
                <a class="icon icon-left pull-left" href="javascript:window.history.go(-1);"></a>
                <a class="icon icon-home pull-right" href="/H5"></a>
                <h1 class="title">搜索</h1>
            </header>
            <div class="content">
                <div class="searchbar row" style="padding: 10px;">
                    <div class="search-input col-80">
                        <label class="icon icon-search" for="search"></label>
                        <input type="search" :duplex="keyword" id='search' placeholder='输入关键字...'/>
                    </div>
                    <a :on-click="@getList" class="button button-fill button-primary col-20">搜索</a>
                </div>
                <div class="free" style="text-align: center">
                    <ul class="product" style="text-align: left">
                        <li :for="e in list" :on-click="@jump(e.id)">
                            <a :css="{'background-image': e.list_cover?'url('+e.list_cover+')':'#eee','background-size': 'cover'}" class="goods" style="display: block;width: 100%;height: 200px;">
                            </a>
                            <div class="ProductText">
                                <h4>{{e.title}}</h4>
                                <h5>{{e.intro}}</h5>
                                <h6>{{e.sell_num}}人已购买</h6>
                                <h3 style="font-size: .7rem"><span>零售价￥{{e.sell_price}}</span></h3>
                                <h3 style="font-size: .6rem"><span>会员价￥{{e.vip_price}}</span></h3>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
	<script type='text/javascript' src='/H5/js/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript' src='/H5/js/avalon.js' charset='utf-8'></script>
    <script type='text/javascript' src='/H5/js/simpleStorage.js' charset='utf-8'></script>
    <!-- <script type='text/javascript' src='/H5/js/wx.js' charset='utf-8'></script> -->
	<!-- <script type='text/javascript' src='http://res2.wx.qq.com/open/js/jweixin-1.4.0.js' charset='utf-8'></script> -->
	<script type='text/javascript' src='/H5/js/mall.js?v=11' charset='utf-8'></script>
    <script>
        var search = avalon.define({
            $id: "search",
            list: [],
            keyword: "",
            jump: function( id ){
                window.location.href = '/H5/detail?id='+id
            },
            getList: function(){
                Mall.request( "/api/GoodsSearch", {keyword: search.keyword} )
                    .always( function( data ){
                        if( data.error_code == 0 ){
                            console.log( data.data.list )
                            search.list = data.data.list
                        }
                    } )
            }
        })
    </script>
</body>
</html>